<template>
  <div>
    <el-aside class="aside-box" :width="isCollapse ? '66px' : '220px'">
      <el-menu
        default-active="/home"
        class="aside-menu"
        unique-opened
        background-color="#363532"
        text-color="#fff"
        active-text-color="#1f9fff"
        router
        @select="handleSelect"
        :collapse-transition="false"
        :collapse="isCollapse"
      >
        <el-menu-item index="/home">
          <i class="el-icon-s-home"></i>
          <span slot="title">首页</span>
        </el-menu-item>
        <el-submenu index="account">
          <template slot="title">
            <i class="el-icon-s-custom"></i>
            <span slot="title">账号管理</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="/accountAdd">创建账号</el-menu-item>
            <el-menu-item index="/accountList">账号列表</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-submenu index="article">
          <template slot="title">
            <i class="el-icon-notebook-1"></i>
            <span slot="title">文章管理</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="/articleAdd">发布文章</el-menu-item>
            <el-menu-item index="/articleList">文章列表</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-submenu index="classify">
          <template slot="title">
            <i class="el-icon-s-grid"></i>
            <span slot="title">分类管理</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="/classifyAdd">创建分类</el-menu-item>
            <el-menu-item index="/classifyList">分类列表</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-submenu index="music">
          <template slot="title">
            <i class="el-icon-headset"></i>
            <span slot="title">音乐管理</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="/musicAdd">添加音乐</el-menu-item>
            <el-menu-item index="/musicList">音乐列表</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-submenu index="message">
          <template slot="title">
            <i class="el-icon-chat-dot-round"></i>
            <span slot="title">留言管理</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="/messageList">留言列表</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-submenu index="friendlink">
          <template slot="title">
            <i class="el-icon-user"></i>
            <span slot="title">友链管理</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="/friendlinkAdd">添加友链</el-menu-item>
            <el-menu-item index="/friendlinkList">友链列表</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-menu-item index="/Settings">
          <template slot="title">
            <i class="el-icon-setting"></i>
            <span>页面设置</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/about">
          <template slot="title">
            <i class="el-icon-info"></i>
            <span>关于</span>
          </template>
        </el-menu-item>
      </el-menu>
    </el-aside>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {};
  },
  computed: {
    ...mapState(["isCollapse"]),
  },
  methods: {
    handleSelect() {
      console.log(this.$route);
      this.$store.commit("setrouteTag", this.$route);
    },
  },
};
</script>

<style lang="less" scoped>
.aside-box {
  height: 100%;
  .aside-menu {
    height: 100%;
  }
}
</style>
